<template>
  <div>
    <h1>元数据:{{ nums }}</h1>
    <h1>计算后结果:{{ events }}</h1>
    <h1>计算后结果:{{ events }}</h1>
    <h1>计算后结果:{{ events }}</h1>
    <button @click="add">add</button>

  </div>
</template>
<!-- 
    vue中的计算属性
    1）依赖于元数据(响应式数据,data,props)
    2) 更加注重的是结果
    3）不能在计算属性中做副作用，交给wath来完成，计算属性不能进行异步操作
    4）计算属性具有缓存的作用
    5）计算属性的值是不能修改的，可以改，但是不建议改，改的话也是改的元数据
 -->
<script lang='ts' setup>
 import {ref,computed} from 'vue'
 let nums=ref<Array<number>>([1,2,3,4,5,6,7,8,9])
 //简写形式的计算属性,较为常见
 const events=computed(()=>{
    console.log('---------计算属性------------');
    return nums.value.filter(item=>item%2==0)
 })
 const add=()=>{
    nums.value.push(10)
 }
</script>

<style lang='scss' scoped>
</style>